<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
<div id="app">
    <h2>点击次数：{{counter}}</h2>
    <button @click="incr(step)">+</button>
    <button v-on:click="decr(step)">-</button>
    <input @mouseout="loss"></input>
</div>
<br>

<div id="parent" @click.self="parent()">parent
    <!-- 父元素 -->
    <div id="child" @click="child()">child
        <!-- 子元素 -->
    </div>
</div>
<br>

<!-- 加上prevent修饰符号之后，不会有a标签的默认跳转行为。而会调用herf方法。 -->
<a id="aherf" href="www.baidu.com" @click.prevent="herf">aherf</a>

<br>
<!-- 当回车键抬起当时候，触发函数 -->
<input id="inputid" type="text" @keyup.enter="inputmethod">

<br>

<!-- once修饰符表示被修饰的标签事件，只能被触发一次，第二次点击无效 -->
<button id="buttonid" @click.once="buttonmethod">按钮</button>


<!--从CDN引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    const app = new Vue({ //初始化一个VUE实例
        el: '#app',     // 用于页面渲染VUE实例的元素
        data: { // 定义数据
            counter: 0,
            step: 2
        },
        methods:{
            incr(n){
                this.counter = this.counter + n
                console.log(event)
            },
            decr(n){
                this.counter = this.counter - n
            },
            loss(){
                this.counter=0
            }
        }
    });

    const app1 = new Vue({
        el: '#child',
        methods:{
            child(){
                console.log("child")
            }
        }
    });

    const app2 = new Vue({
        el: '#parent',
        methods:{
            child(){
                console.log("child")
            },
            parent(){
                console.log("parent")
            }
        }
    });

    const app3 = new Vue({
        el: '#aherf',
        methods:{
            herf(){
                console.log("herf")
            }
        }
    });

    new Vue({
        el: '#inputid',
        methods:{
            inputmethod(){
                console.log("inputid")
            }
        }
    });

    new Vue({
        el: '#buttonid',
        methods:{
            buttonmethod(){
                console.log("buttonmethod")
            }
        }
    });

    function sleep(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)
                return;
        }
    }
</script>

</body>
</html>